<template>
  <view class="notifications-container">
    <view class="header-section">
      <text class="page-title">消息通知</text>
    </view>
    
    <view class="notifications-list">
      <view class="notification-item" v-for="notification in notifications" :key="notification.id">
        <view class="notification-content">
          <text class="notification-title">{{ notification.title }}</text>
          <text class="notification-message">{{ notification.message }}</text>
          <text class="notification-time">{{ notification.time }}</text>
        </view>
        <view class="notification-status" :class="{ 'unread': !notification.read }">
          <text v-if="!notification.read">未读</text>
        </view>
      </view>
    </view>
    
    <view class="empty-state" v-if="notifications.length === 0">
      <text class="empty-text">暂无消息通知</text>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { notificationApi } from '../../src/services/api'

// 消息通知数据
const notifications = ref([
  {
    id: 1,
    title: '课程预约成功',
    message: '您已成功预约明天上午9:00的瑜伽课程',
    time: '2025-10-29 15:30',
    read: false
  },
  {
    id: 2,
    title: '签到提醒',
    message: '您今天还没有签到，记得来健身房打卡哦',
    time: '2025-10-29 08:00',
    read: true
  },
  {
    id: 3,
    title: '会员卡即将到期',
    message: '您的年卡会员将在7天后到期，请及时续费',
    time: '2025-10-28 10:15',
    read: true
  }
])

// 页面加载时获取通知列表
onMounted(() => {
  fetchNotifications()
})

// 获取通知列表
const fetchNotifications = async () => {
  try {
    // 这里应该调用获取通知列表的API
    // const response: any = await notificationApi.getNotifications()
    // notifications.value = response.data
    console.log('获取通知列表')
  } catch (error) {
    console.error('获取通知列表失败:', error)
    uni.showToast({
      title: '获取通知列表失败',
      icon: 'none'
    })
  }
}
</script>

<style lang="scss" scoped>
.notifications-container {
  min-height: 100vh;
  background-color: #FFFFFF;
  padding: 20rpx;
}

.header-section {
  background-color: #fff;
  padding: 30rpx;
  margin-bottom: 20rpx;
  border-radius: 10rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
  
  .page-title {
    font-size: 36rpx;
    font-weight: bold;
    color: #333;
    text-align: center;
  }
}

.notifications-list {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}

.notification-item {
  background-color: #fff;
  border-radius: 10rpx;
  padding: 30rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
  display: flex;
  justify-content: space-between;
}

.notification-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10rpx;
}

.notification-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
}

.notification-message {
  font-size: 28rpx;
  color: #666;
}

.notification-time {
  font-size: 24rpx;
  color: #999;
}

.notification-status {
  display: flex;
  align-items: center;
  margin-left: 20rpx;
}

.unread {
  color: #4B0082;
  font-size: 24rpx;
  font-weight: bold;
}

.empty-state {
  text-align: center;
  padding: 100rpx 0;
}

.empty-text {
  font-size: 28rpx;
  color: #999;
}
</style>